<template>
	<view class="search-container" :style="{'min-height':height+'rpx'}">
		<!-- 搜索框区域 -->
		<view class="search-box">
			<uv-button :customStyle="{height:'60rpx'}" @click="picker.open()">
				{{typeText}}
			</uv-button>
			<uv-input v-model="searchValue.searchName" placeholder="请输入搜索关键词" @input="inputSearch" @confirm="handleSearch"
				class="search-input" :customStyle="{height:'30rpx'}">
			<!-- 	<template v-slot:prefix>
					
					</template> -->
				</uv-input>
			<uv-button @click="handleSearch" type="primary" class="search-btn" :customStyle="{height:'60rpx'}">搜索</uv-button>
		</view>

		<!-- 搜索历史 -->
		<view class="section" v-if="historyList.length > 0 && historyShow">
			<view class="section-header">
				<text class="title">搜索历史</text>
				<uv-icon name="trash" @click="clearHistory" class="clear-icon"></uv-icon>
			</view>
			<view class="tag-container">
				<uv-tags v-for="(item, index) in historyList" :key="index" @click="clickHistory(item)"
					class="history-tag" :text="item"></uv-tags>
			</view>
		</view>
		
		<view class="search-result">
			<view class="result-item" v-for="item in datas" @click="toDetail(item.id)">
				<view class="img">
					<uv-image  :src="api.FileById+item.fileShowId" :width="item.width" :height="item.height">></uv-image>
				</view>
				<view class="bottom">
					<view class="title">
						{{item.name}}
					</view>
					<view class="auth">
						<uv-avatar  size="64rpx"  :src="api.FileById+item.appUserAvatar"></uv-avatar>
						{{item.appUserNickName}}
					</view>
				</view>
			</view>
		</view>

		
		<uv-picker ref="picker" :columns="types" @confirm="typesConfirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useLayouterStore
	} from '@/stores/layouter'
	const layouterStore = useLayouterStore()
	const height = ref(layouterStore.screenHeight - 200)
	import api from './api'
	const picker = ref()
	const searchValue = ref({searchValue:0,searchName:''})
	// 搜索文本

	// 搜索历史（从本地存储加载）
	const historyList = ref([])

	const photographTypes = ref([])
	const types = ref([])
	const typeText= ref('全部')
	const getType = ()=>{
		api.getPhotographTypes().then(res=>{
			photographTypes.value  = res.datas
			types.value = [['全部']]
			photographTypes.value.forEach(type=>{
				types.value[0].push(type.name)
			})
			photographTypes.value.unshift({id:0,name:'全部'})
		})
	}
	getType()

	const typesConfirm = (e)=>{
		typeText.value = e.value[0]
		// searchValue.value = photographTypes.value.find(x=>x.name == e.value[0])
		console.log(photographTypes.value.find(x=>x.name == e.value[0]).id);
	}
	// 加载历史记录
	
	const historyShow = ref(true)
	onMounted(() => {
		const history = uni.getStorageSync('searchHistory') || []
		historyList.value = history.slice(0, 10) // 最多显示10条
	})
	
	//输入框内容改变
	const inputSearch = (value)=>{
		if(value == ''){
			historyShow.value = true
			datas.value = []
		}
	}

	// 处理搜索
	const handleSearch = () => {
		if (searchValue.value.searchName.trim() == '') {
			uni.showToast({
				title: '请输入搜索内容',
				icon: 'none'
			})
			historyShow.value = true
			datas.value = []
			return
		}

		// 添加历史记录
		addToHistory(searchValue.value.searchName)

		// 执行搜索逻辑
		doSearch()
	}

	// 添加到历史记录
	const addToHistory = (keyword) => {
		// 去重处理
		const newHistory = [
			keyword,
			...historyList.value.filter(item => item !== keyword)
		].slice(0, 10) // 保留最近10条

		historyList.value = newHistory
		uni.setStorageSync('searchHistory', newHistory)
	}

	// 清空历史
	const clearHistory = () => {
		historyList.value = []
		uni.removeStorageSync('searchHistory')
	}

	// 点击历史标签
	const clickHistory = (keyword) => {
		searchValue.value.searchName = keyword
		console.log(keyword);
		handleSearch()
	}

	const datas = ref([])

	// 实际搜索方法
	const doSearch = () => {
		uni.showLoading({
			title: '搜索中...'
		})
		historyShow.value = false
		setTimeout(() => {
			api.searchPhotograph(searchValue.value).then(res=>{
				datas.value = res.datas
				uni.hideLoading()
				datas.value.forEach(item=>{
					api.getDimensionsById(item.fileShowId).then(sz => {
						let size = sz.split(",")
						let t = size[0] / 710
						item.width = '710rpx'
						item.height = size[1] / t + 'rpx'
					})
				})
				
			})
		}, 500)
	}
	
	const toDetail = (id) => {
		uni.navigateTo({
			url: '/pages/home/detail?id=' + id
		})
	}
</script>

<style lang="scss">
	.search-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		// min-height: 100vh;
		.search-result{
			.result-item{
				    margin-bottom: 20rpx;
				    border: 1px solid #ccc;
				    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
				.bottom{
					padding: 20rpx;
					.title{
						height: 80rpx;
						    line-height: 80rpx;
					}
					.auth{
						line-height: 64rpx;
						    gap: 20rpx;
						    display: flex;
					}
				}
			}
		}

		.search-box {
			display: flex;
			gap: 20rpx;
			margin-bottom: 30rpx;

			.search-input {
				flex: 1;
				background-color: white;
				border-radius: 50rpx;
				padding: 0 30rpx;
			}

			.search-btn {
				width: 150rpx;
				border-radius: 50rpx;
			}
		}

		.section {
			background-color: white;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 30rpx;

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.clear-icon {
					color: #999;
				}
			}

			.tag-container {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;

				.history-tag {
					background-color: #f0f0f0;
					color: #666;
				}
			}

			.recommend-list {
				.recommend-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #eee;

					&:last-child {
						border-bottom: none;
					}

					text {
						color: #333;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>